<template>
  <div class="chart">
    <div id="homeBar">
      <mu-appbar title="游戏详情" style="background-color:#409EFF">
        <mu-icon-button  icon="arrow_back_ios" slot="left" :to="{name: 'Home' }"/>
      </mu-appbar>
    </div>

    <div id="chart" style="width:100%;height:500px;"></div>
  </div>
</template>

<script>
  import echarts from 'echarts'
    export default {
        data () {
          return {
            option: {
              title : {
                text: '游戏在线人数',
                x:'center'
              },
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: ['大米','小米','89']
              },
              series : [
                {
                    name: '游戏在线人数',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data: [
                    ],
                    itemStyle: {
                      emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                    }
                }
              ]
            }
          }
        },
        mounted () {
          this.getPlayingNum()
          window.onresize = () => {
            echarts.setOption(this,option, true
            )
          }
        },
        methods: {
          getPlayingNum () {
            let that = this
            this.$axios({
              method: 'get',
              url: '/api/GmService.getGamePlayingNum'
            })
            .then(response =>{
              if (response.data.status === 'success') {
                this.option.series[0].data.push({
                  value: response.data.dummyNum,
                  name: '大米'
                })
                this.option.series[0].data.push({
                  value: response.data.cmNum,
                  name: '小米'
                })
                this.option.series[0].data.push({
                  value: response.data.eightNineNum,
                  name: '89'
                })
                echarts.init(document.getElementById('chart')).setOption(this.option)
              } else {
                this.$message.error(response.data.cause)
              }
            })
            .catch(e => {
              console.log(e)
              this.$message.error('服务器出小差了')
            })
          }
        }
    }
</script>
